<template>
	<view class="img-view">
		<block v-if="startUpPage.isEnable && startUpPage.img">
			<view @click="goPageS('/pages/index/index', 'switchTab')" class="go-index-btn">跳过 {{ time }} s</view>
			<image @click="goPageS(startUpPage.url, startUpPage.switchTab)" class="start-img" :src="startUpPage.img" mode="aspectFit"></image>
		</block>
	</view>
</template>

<script>
export default {
	data() {
		return {
			startUpPage: {
				img: '',
				isEnable: false,
				time: 5
			},
			time: 5,
			timesInterval: null
		};
	},
	watch: {
		// 监听倒计时，当时间为0时跳转页面，在这里监听的原因是为了跳出setInterval,防止setInterval不会终止，而不停的跳转首页
		time(val) {
			if (val === 0) {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		}
	},
	onShow() {
		this.getBasicField();
	},
	methods: {
		goPageS(url, type) {
			if (!url) {
				return;
			}
			clearInterval(this.timesInterval);
			this.goPage(url, type);
		},
		// 获取配置项
		getBasicField() {
			this.$u.api
				.getBasicField({
					field: ['startUpPage', 'shop', 'themeStyle', 'classSetting', 'recommend', 'startDeliveryPrice', 'goodsPrice', 'stockDisplay', 'isSalesNum']
				})
				.then(({ data }) => {
					if (data.startUpPage && data.startUpPage.isEnable && data.startUpPage.img) {
						this.startUpPage = data.startUpPage;
						this.timesInterval = setInterval(() => {
							if (this.time === 0) {
								clearInterval(this.timesInterval);
							} else {
								this.time = this.time - 1;
							}
						}, 1000);
					} else {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}
					this.$store.commit('commit_basicSet', data);
				});
		}
	}
};
</script>

<style scoped lang="scss">
.img-view {
	position: relative;
	background-color: #ffffff;
	width: 750upx;
	height: 100vh;
	.go-index-btn {
		position: absolute;
		bottom: 150upx;
		right: 20upx;
		font-size: 26upx;
		color: #fff;
		background-color: rgba($color: #000000, $alpha: 0.4);
		width: 150upx;
		height: 66upx;
		line-height: 66upx;
		text-align: center;
		border-radius: 66upx;
		z-index: 9;
	}
	.start-img {
		width: 750upx;
		height: 100vh;
		display: block;
	}
}
</style>
